<% @page_title = "Virtual Machines" %>
<div class="auto-refresh hidden" data-interval="10"></div>

<%== part(
  "components/page_header",
  breadcrumbs: [%w[Projects /project], [@project.name, @project.path], ["Virtual Machines", "#"]],
  right_items: (!@vms.empty? && has_project_permission("Vm:create")) ?
    (if @project.get_ff_gpu_vm
      [
        part("components/button", text: "Create Virtual Machine", link: "vm/create?show_gpu=f", extra_class: "mr-2"),
        part("components/button", text: "Create GPU Virtual Machine", link: "vm/create?show_gpu=t"),
      ]
     else
      [part("components/button", text: "Create Virtual Machine", link: "vm/create")]
     end) : []
) %>

<div class="grid gap-6">
  <%== part(
    "components/table_card",
    headers: ["Name", "Location", "Size", "Storage Size", "State", "IP Address"],
    rows: @vms.map do |vm|
      [
        [
          [vm.name, {link: path(vm)}],
          vm.display_location,
          vm.display_size,
          (vm.storage_size_gib > 0) ? "#{vm.storage_size_gib} GB" : "-",
          ["vm_state_label", {component: { state: vm.display_state }}],
          [vm.ip4 || vm.ip6 || "Not assigned yet", {copyable: true}]
        ],
        {id: "vm-#{vm.ubid}"}
      ]
    end,
    empty_state: {
      icon: "hero-server-stack",
      title: "No virtual machines",
      description: "You don't have permission to create virtual machines."
    }.merge(has_project_permission("Vm:create") ? {
      description: "Get started by creating a new virtual machine.",
      buttons: (
        if @project.get_ff_gpu_vm
          {
            "Create Virtual Machine" => "#{@project.path}/vm/create?show_gpu=f",
            "Create GPU Virtual Machine" => "#{@project.path}/vm/create?show_gpu=t",
          }
        else
          {"Create Virtual Machine" => "#{@project.path}/vm/create"}
        end)
    } : {})
  ) %>
</div>
